<template>
	<div class="component-Media">
		<video
			style="object-fit: fill"
			id="video"
			src="http://vjs.zencdn.net/v/oceans.mp4"
			controls="true"
			poster="images.jpg"
			preload="auto"
			webkit-playsinline="true"
			playsinline="true"
			x-webkit-airplay="allow"
			x5-video-player-type="h5"
			x5-video-player-fullscreen="true"
			x5-video-orientation="portraint"
		></video>
		<Audio file="http://www.hochmuth.com/mp3/Boccherini_Concerto_478-1.mp3"></Audio>
		<img class="component-img" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="" />
	</div>
</template>
<script>
import { ImagePreview } from "vant";
export default {
	name: "Media",
	props: {
		file: {
			type: Object,
			default: function () {
				return {};
			},
		},
	},
	components: {},
	data() {
		return {
			list: [],
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		getList() {
			this.$APIs.getExam({ pageNo: 1, pageSize: 10 }).then((data) => {
				this.list = data.data;
			});
		},
		showImg() {
			ImagePreview([
				"https://img.yzcdn.cn/vant/apple-1.jpg",
				"https://img.yzcdn.cn/vant/apple-2.jpg",
			]);
		},
	},
};
</script>
<style scoped lang="scss">
.component-Media {
	.component-img {
		width: 80%;
		margin: 0 10%;
	}
	video {
		background: #f2f3f5;
		width: 90%;
		margin: 0 5%;
	}
}
</style>
